<template>
  <div class="vf">
    <div class="v-f-title">
      <div class="v-t-t">
        <div
          class="title curso"
          v-for="(t, i) in codes"
          :key="i"
          :class="{ select: i === selectIndex }"
          @click="click(i)"
        >
          <div>{{t.title}}</div>
        </div>
      </div>
      <div class="path">
        源码路径: &nbsp;
        <vue-link :href="filesUrls[selectIndex]">
          {{filesPaths[selectIndex]}}
        </vue-link>
        <span class="btn curnosel" @click="extendClick">{{extend ? '收起' : '展开'}}代码</span>
      </div>
    </div>

    <div class="v-f-codes" v-show="extend">
      <div class="code">
        <div class="line-numbers-mode" :class="getType" v-html="getCode">
        </div>
      </div>
      <div class="loading" v-show="isLoading">加载中</div>
    </div>

  </div>
</template>

<script>
import HrefMixin from "../mixins/href"
import VueMdHeadHtmlMixin from "../mixins/vue-md-head-html"

import apiRunResult from "../utils/api-run-result"

export default {
  props: {
    // -- [{ title: '标题', path: '显示的内容', url: '引用原文', highlight: '3,4,5', params: '扩展' }]
    codes: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mixins: [ HrefMixin, VueMdHeadHtmlMixin ],
  data() {
    return {
      isLoading: false,
      extend: false,
      selectIndex: 0,
      filesPaths: [],
      filesUrls: [],
      prismCodes: [],
    };
  },
  created() {
    this._loaderCodes()
  },
  computed: {
    getCode() {
      const prismCodes = this.prismCodes || []
      if (!(prismCodes && Array.isArray(prismCodes))) return ""
      const index = this.selectIndex || 0
      if (index > prismCodes.length) return ""
      const map = prismCodes[index] || {}
      const html = map.html || ""
      return html
    },
    code() {
      const codes = this.codes || []
      if (!(codes && Array.isArray(codes))) return null
      const index = this.selectIndex || 0
      if (index > codes.length) return null
      return codes[index] || null
    },
    getType() {
      const pre = "language-";
      const code = this.code
      if (code) {
        const type = code.type || ""
        return pre + type
      }
      return ""
    },
  },
  methods: {
    _loaderCodes() {
      this.prismCodes = []
      this.filesPaths = []
      this.filesUrls = []
      const codes = this.codes || []
      if (!(codes && Array.isArray(codes))) return
      const lenght = codes.length

      for (let i = 0; i < lenght; i++) {
        const code = codes[i] || {}
        const filePath = code.path || ""
        let path = this.absHref(filePath)
        let url = this.absHref(code.url) || ''
        // console.log('path=', path)
        // console.log('url=', url)
        const type = code.type || ""
        const highlight = code.highlight

        if (!url && path) {
          url = path
        } else if (url && !path) {
          path = url
        }

        let showPath = filePath
        let scTemp = false
        let scCode = ''
        if (filePath.indexOf('scjs') >= 0) {
          scTemp = true
          showPath = filePath.replace('scjs/', '')
          scCode = showPath.slice(
            showPath.lastIndexOf('_'),
            showPath.lastIndexOf('.js')
          )
        }

        if (filePath.indexOf('scts') >= 0) {
          scTemp = true
          showPath = filePath.replace('scts/', '')
          scCode = showPath.slice(
            showPath.lastIndexOf('_'),
            showPath.lastIndexOf('.ts')
          )
        }

        if (scTemp) {
          showPath = showPath.replace(scCode, '')

          showPath = showPath.replaceAll('-', '/')
          showPath = showPath.replaceAll('_', '-')
        }
        console.log('showPath=', showPath, 'path=',path)
        this.filesPaths.push(showPath)
        this.filesUrls.push(url)

        this.prismCodes.push({ type, path, html: "" }) //默认是空的
        this.questApi(path, type, i === 0, i, highlight)
      }
    },
    click(i) {
      this.selectIndex = i
    },
    extendClick() {
      this.extend = !this.extend
    },
    questApi(url, type, isLoading, index, highlight) {
      if (isLoading) this.isLoading = true

      apiRunResult({ url })
        .then((res) => {
          res = res || {}
          const data = res.data || ""
          this.isLoading = false

          const html = this.getHtml(data, type, highlight)
          this.prismCodes.splice(index, 1, { type, url, html })
        })
        .catch((error) => {
          this.isLoading = false
          console.log('api error url=', url)
          console.log('api error=', error)
        });
    },
  },
};
</script>